<!-- @format -->

<template>
  <view v-if="modelValue">
    <view class="mask" @click="onMask">
      <view class="content" @click.stop>
        <view class="top">
          <view class="cancel" @click="cancel">取消</view>
          <view class="title">选择省市区</view>
          <view class="confirm" @click="confirm">确定</view>
        </view>
        <view class="city-scroll">
          <scroll-view scroll-y class="province" :scroll-with-animation="animation" :scroll-into-view="scrollProvince">
            <view
              v-for="(province, pIndex) in cityAll"
              :id="'tab-' + pIndex"
              :key="province.label"
              class="item"
              :class="{ 'item-active': pIndex === chose[0] }"
              @click="onProvince('tab-' + pIndex, pIndex)"
            >
              {{ province.label }}
            </view>
          </scroll-view>
          <scroll-view scroll-y class="city" :scroll-with-animation="animation" :scroll-into-view="scrollCity">
            <view
              v-for="(city, cIndex) in cityAll[chose[0]].list"
              :id="'tab-' + cIndex"
              :key="city.label"
              class="item"
              :class="{ 'item-active': cIndex === chose[1] }"
              @click="onCity('tab-' + cIndex, cIndex)"
            >
              {{ city.label }}
            </view>
          </scroll-view>
          <scroll-view scroll-y class="area" :scroll-with-animation="animation" :scroll-into-view="scrollArea">
            <view v-if="areaHasAll" class="item" id="tab-all" :class="{ 'item-active': chose[2] === -1 }" @click="onArea('tab-all', -1)"> 全部 </view>
            <view
              v-for="(area, aIndex) in cityAll[chose[0]].list[chose[1]].list"
              :id="'tab-' + aIndex"
              :key="area.label"
              class="item"
              :class="{ 'item-active': aIndex === chose[2] }"
              @click="onArea('tab-' + aIndex, aIndex)"
            >
              {{ area.label }}
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from "vue"
import { cityAll } from "./city"

const props = withDefaults(
  defineProps<{
    modelValue: boolean
    /**
     * 已选中地址
     */
    value?: string[]
    /**
     * 返回label还是code
     */
    resType?: "label" | "code" | "all"
    /**
     * 区是否有全部
     */
    areaHasAll?: boolean
  }>(),
  {
    resType: "label",
    areaHasAll: true,
  }
)
const animation = ref(false)

const scrollVale = () => {
  const [oldP, oldC, oldA] = [scrollProvince.value, scrollCity.value, scrollArea.value]
  scrollProvince.value = ""
  scrollArea.value = ""
  scrollCity.value = ""
  nextTick(() => {
    scrollProvince.value = oldP
    scrollCity.value = oldC
    scrollArea.value = oldA
    setTimeout(() => {
      animation.value = true
    }, 0)
  })
}

watch(
  () => props.modelValue,
  (val: boolean) => {
    if (val) {
      scrollVale()
    } else {
      animation.value = false
    }
  }
)

const chose = ref<number[]>([0, 0, 0])
const scrollProvince = ref("tab-0")
const scrollCity = ref("tab-0")
const scrollArea = ref("tab-0")

const isSelect = (val: string[]) => {
  console.log("val[0]", val[0])
  let provinceIndex = 0,
    cityIndex = 0,
    areaIndex = 0
  provinceIndex = cityAll.findIndex((item) => item.label === val[0])
  if (provinceIndex === -1) return
  if (cityAll[provinceIndex]) {
    cityIndex = cityAll[provinceIndex].list.findIndex((item) => item.label === val[1])
    if (cityAll[provinceIndex].list[cityIndex]) {
      areaIndex = cityAll[provinceIndex].list[cityIndex].list.findIndex((item) => item.label === val[2])
    }
  }
  chose.value = [provinceIndex, cityIndex, areaIndex]
  console.log("vh", chose.value)
  scrollProvince.value = "tab-" + provinceIndex
  scrollCity.value = "tab-" + cityIndex
  scrollArea.value = "tab-" + areaIndex
}
watch(
  () => props.value,
  (val?: string[]) => {
    console.log("val 1", val)
    if (val?.length) {
      isSelect(val)
    }
  },
  {
    immediate: true,
  }
)
const onProvince = (label: string, index: number) => {
  chose.value[0] = index
  chose.value[1] = 0
  if (props.areaHasAll) {
    chose.value[2] = -1
  } else {
    chose.value[2] = 0
  }
  scrollProvince.value = label
  setTimeout(() => {
    scrollCity.value = "tab-0"
    scrollArea.value = props.areaHasAll ? "tab-all" : "tab-0"
  }, 50)
}
const onCity = (label: string, index: number) => {
  chose.value[1] = index
  if (props.areaHasAll) {
    chose.value[2] = -1
  } else {
    chose.value[2] = 0
  }
  scrollCity.value = label

  setTimeout(() => {
    scrollArea.value = props.areaHasAll ? "tab-all" : "tab-0"
  }, 50)
}
const onArea = (label: string, index: number) => {
  chose.value[2] = index
  scrollArea.value = label
}

const onMask = () => {
  emits("update:modelValue", false)
}
const init = () => {
  chose.value = [0, 0, 0]
  scrollProvince.value = "tab-0"
  scrollCity.value = "tab-0"
  scrollArea.value = "tab-0"
}
const cancel = () => {
  emits("update:modelValue", false)
  init()
}
const confirm = () => {
  const province = {
    label: cityAll[chose.value[0]].label,
    code: cityAll[chose.value[0]].code,
  }
  const city = {
    label: cityAll[chose.value[0]].list[chose.value[1]].label,
    code: cityAll[chose.value[0]].list[chose.value[1]].code,
  }
  const area = {
    label: "",
    code: "",
  }
  if (props.areaHasAll && chose.value[2] === -1) {
    area.label = "全部"
  } else {
    area.label = cityAll[chose.value[0]].list[chose.value[1]].list[chose.value[2]].label
    area.code = cityAll[chose.value[0]].list[chose.value[1]].list[chose.value[2]].code
  }

  emits("update:modelValue", false)
  let res = []
  switch (props.resType) {
    case "label":
      res = [province.label, city.label, area.label]
      break
    case "code":
      res = [province.code, city.code, area.code]
      break
    case "all":
      res = [province, city, area]
      break
  }

  emits("confirm", res)
}

const emits = defineEmits(["update:modelValue", "confirm"])
</script>

<style scoped lang="scss">
.mask {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  .content {
    position: absolute;
    bottom: 0;
    height: 90%;
    width: 100%;
    z-index: 99999;
    background: #ffffff;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    .top {
      height: 100rpx;
      display: flex;
      align-items: center;
      padding: 20rpx 40rpx;
      justify-content: space-between;
      position: relative;
      border-bottom: #e6e6e6 1rpx solid;
      .cancel {
        color: #333333;
      }
      .title {
        font-size: 30rpx;
        font-weight: 600;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
      .confirm {
        background: #0B8EFF;
        border-radius: 24rpx;
        padding: 10rpx 20rpx;
        color: white;
      }
    }
    .city-scroll {
      display: flex;
      .province {
        height: calc(90vh - 100rpx);
        background: #f6f6f6;
      }
      .city {
        height: calc(90vh - 100rpx);
      }
      .area {
        height: calc(90vh - 100rpx);
      }
      .item {
        padding: 40rpx 20rpx;
      }
      .item-active {
        color: #0B8EFF;
        background: #fefefe;
      }
    }
  }
}
</style>
